<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用BFC解决相邻外边距重叠问题</title>
    <style>
        /* 
           **使用开启BFC解决相邻外边距折叠问题要为元素外面再包一层div**

           Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(比如子父盒子嵌套，兄弟盒子一个设置margin-left一个设置margin-right)
              
           因为子父元素在同一个BFC中，所以要么为父元素开启BFC或者在子元素的外面包一个div然后通过div开启BFC

           */
        .box1{
            width: 300px;
            height: 300px;
            background-color: deepskyblue;
            /* overflow: hidden; */
        }



        .ov{
            overflow: hidden;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: fuchsia;
            /* 子元素设置margin-top会把父元素挤下来 */
            margin-top: 50px;
           
        }
    </style>
</head>
<body>

  <div class="box1">
      <div class="ov">
        <div class="box2"></div>
      </div>
     
  </div>


  
    
</body>
</html>